{
  "metadata" : {
    "id" : "c7f8e137-ece9-4383-b2c9-6604fe3b072c",
    "name" : "Simple Plotly Chart",
    "user_save_timestamp" : "1111-10-12T09:00:00.000Z",
    "auto_save_timestamp" : "1970-01-01T03:00:00.000Z",
    "language_info" : {
      "name" : "scala",
      "file_extension" : "scala",
      "codemirror_mode" : "text/x-scala"
    },
    "trusted" : true,
    "sparkNotebook" : null,
    "customLocalRepo" : null,
    "customRepos" : null,
    "customDeps" : null,
    "customImports" : null,
    "customArgs" : null,
    "customSparkConf" : null,
    "customVars" : null
  },
  "cells" : [
    {
      "metadata" : {
        "id" : "DC16BF67890349F580549428C0848BB2"
      },
      "cell_type" : "markdown",
      "source" : "# Bar Charts"
    },
    {
      "metadata" : {
        "id" : "B569E588AE474C348E5DC84731FF8372"
      },
      "cell_type" : "markdown",
      "source" : "## Basic Bar Chart"
    },
    {
      "metadata" : {
        "trusted" : true,
        "input_collapsed" : false,
        "collapsed" : false,
        "id" : "D3BAD6370D1B4EB98988845E1A09F323"
      },
      "cell_type" : "code",
      "source" : [
        "case class Species(name: String, amount: Int)\n"
      ],
      "outputs" : [
        {
          "name" : "stdout",
          "output_type" : "stream",
          "text" : "defined class Species\n"
        },
        {
          "metadata" : { },
          "data" : {
            "text/html" : ""
          },
          "output_type" : "execute_result",
          "execution_count" : 1,
          "time" : "Took: 1.153s, at 2017-07-13 16:00"
        }
      ]
    },
    {
      "metadata" : {
        "trusted" : true,
        "input_collapsed" : false,
        "collapsed" : false,
        "id" : "37B690E0CA6D41F380EA548312EFB490"
      },
      "cell_type" : "code",
      "source" : [
        "val bar = CustomPlotlyChart(Seq(Species(\"giraffes\", 20), Species(\"orangutans\", 14), Species(\"monkeys\", 23)), \n",
        "                            dataOptions=\"{type: 'bar'}\",\n",
        "                            dataSources=\"{x: 'name', y: 'amount'}\")\n",
        "bar\n"
      ],
      "outputs" : [
        {
          "name" : "stdout",
          "output_type" : "stream",
          "text" : "bar: notebook.front.widgets.charts.CustomPlotlyChart[Seq[Species]] = <CustomPlotlyChart widget>\nres2: notebook.front.widgets.charts.CustomPlotlyChart[Seq[Species]] = <CustomPlotlyChart widget>\n"
        },
        {
          "metadata" : { },
          "data" : {
            "text/html" : "<div>\n      <script data-this=\"{&quot;dataId&quot;:&quot;anondd714328a46da563dee3980eef451880&quot;,&quot;dataInit&quot;:[{&quot;name&quot;:&quot;giraffes&quot;,&quot;amount&quot;:20},{&quot;name&quot;:&quot;orangutans&quot;,&quot;amount&quot;:14},{&quot;name&quot;:&quot;monkeys&quot;,&quot;amount&quot;:23}],&quot;genId&quot;:&quot;1951807630&quot;}\" type=\"text/x-scoped-javascript\">/*<![CDATA[*/req(['../javascripts/notebook/playground','../javascripts/notebook/magic/customPlotlyChart'], \n      function(playground, _magiccustomPlotlyChart) {\n        // data ==> data-this (in observable.js's scopedEval) ==> this in JS => { dataId, dataInit, ... }\n        // this ==> scope (in observable.js's scopedEval) ==> this.parentElement ==> div.container below (toHtml)\n\n        playground.call(data,\n                        this\n                        ,\n                        {\n    \"f\": _magiccustomPlotlyChart,\n    \"o\": {\"js\":\"var layout = {}; var dataSources={x: 'name', y: 'amount'}; var dataOptions = {type: 'bar'}; var extraOptions = {}\",\"headers\":[\"name\",\"amount\"],\"height\":400}\n  }\n  \n                        \n                        \n                      );\n      }\n    );/*]]>*/</script>\n    <div>\n      <span class=\"chart-total-item-count\"><p data-bind=\"text: value\"><script data-this=\"{&quot;valueId&quot;:&quot;anon4c5088d8f66ada03ebddac7b649c781e&quot;,&quot;initialValue&quot;:&quot;3&quot;}\" type=\"text/x-scoped-javascript\">/*<![CDATA[*/\nreq(\n['observable', 'knockout'],\nfunction (O, ko) {\n  ko.applyBindings({\n      value: O.makeObservable(valueId, initialValue)\n    },\n    this\n  );\n});\n        /*]]>*/</script></p> entries total</span>\n      <span class=\"chart-sampling-warning\"><p data-bind=\"text: value\"><script data-this=\"{&quot;valueId&quot;:&quot;anon4cf4f7c8df4dea105045d8b797b9acc1&quot;,&quot;initialValue&quot;:&quot;&quot;}\" type=\"text/x-scoped-javascript\">/*<![CDATA[*/\nreq(\n['observable', 'knockout'],\nfunction (O, ko) {\n  ko.applyBindings({\n      value: O.makeObservable(valueId, initialValue)\n    },\n    this\n  );\n});\n        /*]]>*/</script></p></span>\n      <div>\n      </div>\n    </div></div>",
            "image/svg" : ""
          },
          "data_list" : {
            "application/svg+pngbase64" : [
              ""
            ]
          },
          "output_type" : "execute_result",
          "execution_count" : 2,
          "time" : "Took: 1.566s, at 2017-07-13 16:00"
        }
      ]
    },
    {
      "metadata" : {
        "trusted" : true,
        "input_collapsed" : false,
        "collapsed" : true,
        "id" : "3E8C3458A74E471486763AA3C991260E"
      },
      "cell_type" : "code",
      "source" : [ ],
      "outputs" : [ ]
    }
  ],
  "nbformat" : 4
}